<template>
	<view class="details">
		<view class="ac-item">
			<view class="info">
				<view class="user-info">
					<image class="head" :src="headHandle(activityInfo)" mode="aspectFill"></image>
					<view class="name-time">
						<text class="name">{{activityInfo.publicUserName}}</text>
						<text class="time">{{handleTime(activityInfo.update_time)}}</text>
					</view>
				</view>
			
			</view>
			<view class="content">
				<text class="cont-text">{{activityInfo.title}}</text>
				<view style="margin-top: 16rpx;" @click="activityDetails(activityInfo)">
					<text style="color: #28C2CD;">活动详情</text>
					<uni-icons type="right" color="#28C2CD" size="28rpx"></uni-icons>
				</view>
			</view>				
			<view class="video-box" v-if="activityInfo.video_list&&activityInfo.video_list.length>0">
				<zy-video 
					:ref="'videoRef'"
					:refi="'videoRef'"
					:width="utils.getpx(686)"
					:height="utils.getpx(386)"
					@playVideo="playVideo"
					:src="activityInfo.video_list[0]"></zy-video>
			</view>
			<view class="images-box" v-else>
				<image class="img" v-for="(path, i) in activityInfo.dstImgs" :key="i" :src="path" mode="aspectFill"></image>
			</view>
		</view>
		<view class="ranking">
			<view class="title-rank">
				<text class="stu-name">姓名</text>
				<text class="medal-name">勋章类型</text>
				<text class="stu-class">评分</text>
				<text class="stu-score">星级</text>
			</view>
			<view class="list">
				<view class="st-item" v-for="(item, i) in activityUserRanking" :key="i" @click="activityAudit(item.student_account_id)">
					<text class="stu-name">{{item.name}}</text>
					<text class="medal-name">{{item.medal_name}}</text>
					<text class="stu-class">{{item.evaluation || '-'}}分</text>
					<text class="stu-score">{{item.score_teacher || 0}}星</text>
				</view>
			</view>
		</view>
		<view class="publish">
			<view class="fixed-box" @click="publicActivityUserRanking">
				<text>{{isPublic? '撤销发布' : '发布结果'}}</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
    data() {
        return {
			activityInfo: {}, // 活动详情信息
			activityId: '', // 活动id
			activityUserRanking: [], // 学生排行列表
			isPublic: false // 是否已发布结果
        }
    },
	onShow(){
		if(this.activityId){
			this.getActivityUserRanking()
		}
	},
	onLoad(options){
		this.activityId = options.id
		this.getActivityParInfo()
		this.getActivityUserRanking()
	},
	methods: {
		// 获取活动详情
		getActivityParInfo(){
			this.api.get('activity/getActivityInfo', {
				activityId: this.activityId
			}).then(res=>{
				if(res.data.state != 'ok') return
				this.activityInfo = res.data.activity
                if(this.activityInfo.files){
					this.handleFilesShow(this.activityInfo.files)
				}
			
			})
		},
		// 处理头像展示
		headHandle(item){
			let info = {}
			info.avatarUrl = item.publicUserPic
			info.userType = item.publicUserType
			info.sex = item.publicUserSex
            // 返回头像链接
			return this.utils.headImage(info)
		},
		
        // 处理日期展示格式
		handleTime(time){
			time = time?time.split(' ')[0].split('-').join('.'):''
			return time
		},
		// 查询某个活动的学生排名
		getActivityUserRanking(){
			this.api.get('activity/getActivityUserRanking', {
				activityId: this.activityId,
				isAdmin: true
			}).then(res => {
				if(res.data.state == 'ok'){
					this.activityUserRanking = res.data.activityUserRanking
					this.isPublic = res.data.isPublic
				}
			})
		},
		// 发布/撤销活动排名结果
		publicActivityUserRanking(){
			this.api.post('activity/publicActivityUserRanking', {
				activityId: this.activityId
			}).then(res => {
				if(res.data.state == 'ok'){
					this.getActivityUserRanking()
				}
			})
		},
		
		// 活动审核
		activityAudit(accountId){
			uni.navigateTo({
				url: `/pages/teachers/activity-audit-details?id=${this.activityId}&state=1&stuId=${accountId}`
			})
		},
		// 活动详情
		activityDetails(item){
			uni.navigateTo({
				url: `/pages/student/active-details?id=${item.id}&myPublish=1`
			})
		},
		// 获取显示图片的链接
		handleFilesShow(list, index){
			list = JSON.parse(list)
			let imgs = []
			for(let i=0; i<list.length; i++){
				imgs.push(`${this.api.xiaodeObsUrl}${list[i].path}`)
				
			}
			this.$set(this.activityInfo, 'dst_imgs', imgs)

		},
	}
}
</script>
<style lang="less" scoped>
	.ac-item{
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 32rpx 32rpx 8rpx;
		color: #333333;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.active-type{
		font-size: 28rpx;color: #666666;
	}
	.user-info{
		display: flex;
		.head{
			width: 88rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}
	}
	.name-time{
		margin-left: 24rpx;
		.name{
			display: block;
			line-height: 44rpx;
			
		}
		.time{
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	.content{
		margin-top: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		white-space: pre-line;
	}
	.cont-text{
		display: block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.images-box, .video-box{
		margin-top: 40rpx;
	}
	.images-box{
		
		image{
			width: 215rpx;
			height: 215rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 24rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
	}
	.ranking{
		padding: 0 32rpx;
		.stu-name{
			width: 148rpx;
		}
		.medal-name{
			width: 140rpx
		}
		.stu-class{
			width: 120rpx;
		}
		.stu-score{
			width: 60rpx;
		}
	}
	.title-rank{
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F9F9F9;
		margin-bottom: 20rpx;
		padding: 0 54rpx;
		.stu-name{
			
			box-sizing: border-box;
		}
	}
	.list{
		margin-top: 54rpx;
	}
	.st-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 54rpx;
		margin-bottom: 92rpx;
	}
	.publish{
		height: 142rpx;
	}
	.fixed-box{
		position: fixed;
		left: var(--window-left);
		right: var(--window-right);
		bottom: 0;
		padding: 24rpx 32rpx;
		box-shadow: 0 2rpx 6rpx 0 rgba(208, 208, 208, .5);
		background: #fff;
		text{
			display: inline-block;
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			background: #28C2CD;
			border-radius: 20rpx;
		}
	}
</style>